<template>
  <div class="dashboard-container">
    <el-card>
      <div class="dashboard-text">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="单据编号：" style="width: 20%; line-height: 20px;">
            <el-input v-model="formInline.billNo" placeholder="请输入" style="width: 100%; "></el-input>
          </el-form-item>
          <el-form-item label="单据日期" style="width: 25%; line-height: 20px;">
            <div class="block">
              <el-date-picker v-model="formInline.value1" type="daterange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="单据主题" style="width: 20%; line-height: 20px;">
            <el-input v-model="formInline.subject" placeholder="请输入" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item label="供应商" style="width: 300px;line-height: 20px;" v-if="shuxing">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="请选择" value="shanghai"></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item label="单据阶段" style="width: 300px;line-height: 20px;" v-if="shuxing">
            <el-select v-model="formInline.billStage" placeholder="请选择">
              <el-option v-for="item in billStage" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="已生效" style="width: 300px;line-height: 20px;" v-if="shuxing">
            <el-select v-model="formInline.isEffective" placeholder="请选择">
              <el-option v-for="item in isEffective" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="已关闭" style="width: 300px;line-height: 20px;" v-if="shuxing">
            <el-select v-model="formInline.isClosed" placeholder="请选择">
              <el-option v-for="item in isClosed" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="已作废" style="width: 300px;line-height: 20px;" v-if="shuxing">
            <el-select v-model="formInline.isVoided" placeholder="请选择">
              <el-option v-for="item in isVoided" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
            <el-button icon="el-icon-s-help" type="primary" @click="onSubmit">高级查询</el-button>
            <span class="el-icon-arrow-down" @click="zhankai" style="color: #1890ff;" v-if="!shuxing">展开</span>
            <span class="el-icon-arrow-up" @click="zhankai" style="color: #1890ff;" v-if="shuxing">收起</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="fn">
        <i class="el-icon-plus">
          <el-button type="text" @click="add()">新增</el-button>

          <el-dialog title="采购入库-新增" :fullscreen="bigscreen" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <i class="el-icon-full-screen" @click="bigscreen = !bigscreen"></i>
              <div class="one">
                <el-form-item label="单据编号" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.Billid" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="单据日期" :label-width="formLabelWidth">
                  <div class="block">
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </el-form-item>

                <el-select v-model="editform.region" disabled placeholder=""></el-select>

                <el-form-item label="已生效" :label-width="formLabelWidth">
                  <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="已关闭" :label-width="formLabelWidth">
                  <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="已作废" :label-width="formLabelWidth">
                  <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>
              </div>

              <div class="two">
                <el-form-item label="单据主题" :label-width="formLabelWidth">
                  <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="业务员" :label-width="formLabelWidth">
                  <el-input placeholder="请先选择用户" v-model="editform.input3" class="input-with-select">
                    <el-button slot="append">选择用户</el-button>
                  </el-input>
                </el-form-item>


                <el-form-item label="业务部门" :label-width="formLabelWidth">
                  <el-select v-model="value" placeholder="请选择"></el-select>
                </el-form-item>
              </div>

              <div class="three">
                <el-form-item label="供应商" :label-width="formLabelWidth">
                  <el-select v-model="value" placeholder="请选择"></el-select>
                </el-form-item>

                <el-form-item label="采购订单" :label-width="formLabelWidth">
                  <el-input v-model="editform.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="发票类型" :label-width="formLabelWidth">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="four">
                <el-form-item label="入库经办" :label-width="formLabelWidth">
                  <el-input placeholder="请先选择用户" v-model="this.editform.input3" class="input-with-select">
                    <el-button slot="append">选择用户</el-button>
                  </el-input>
                </el-form-item>
              </div>

              <!-- tab标签切换 -->
              <el-tabs v-model="editform.activeName" @tab-click="handleClick">
                <el-tab-pane label="采购订单明细" name="first">
                  <div class="first">
                    <el-button disabled>添加></el-button>
                  </div>
                  <el-table :data="table" style="width: 100%" height="250">
                    <el-table-column fixed type="selection" width="55"></el-table-column>
                    <el-table-column fixed type="index" label="#" width="150">
                    </el-table-column>
                    <el-table-column fixed prop="date" label="源单类型" width="160">
                    </el-table-column>
                    <el-table-column fixed prop="name" label="源单分录号" width="120">
                    </el-table-column>
                    <el-table-column fixed prop="province" label="物料" width="120">
                    </el-table-column>
                    <el-table-column prop="city" label="规格型号" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="单位" width="300">
                    </el-table-column>
                    <el-table-column prop="zip" label="数量" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="税率%" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="含税单价" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="折扣率%" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="税额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="含税金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="已入库数量" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="已入库金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="结算数量" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="结算金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="已开票金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="备注" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="自定义1" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="自定义2" width="120">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="明细" name="second">
                  <el-table :data="table" style="width: 100%" height="250">
                    <el-table-column fixed type="selection" width="55"></el-table-column>
                    <el-table-column fixed type="index" label="#" width="150">
                    </el-table-column>
                    <el-table-column fixed prop="name" label="源单分录号" width="120">
                    </el-table-column>
                    <el-table-column fixed prop="province" label="物料" width="120">
                    </el-table-column>
                    <el-table-column prop="city" label="规格型号" width="120">
                    </el-table-column>

                    <el-table-column prop="zip" label="仓库" width="120">
                    </el-table-column>

                    <el-table-column prop="zip" label="批次" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="单位" width="120">
                    </el-table-column>

                    <el-table-column prop="zip" label="结算数量" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="税率%" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="含税单价" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="折扣率%" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="税额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="结算金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="涨吨数量+/-" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="入库数量" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="采购费用" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="入库金额" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="备注" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="自定义1" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="自定义2" width="120">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>

              <!-- 备注 -->
              <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="备注" style="width: 300px;line-height: 20px;">
                  <el-input type="textarea" autosize placeholder="请输入内容" v-model="editform.textarea1">
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 上传附件 -->
              <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="附件" style="width: 300px;line-height: 20px;">
                  <input type="file">
                </el-form-item>
              </el-form>



            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </i>
        <i class="el-icon-download" @click="Export">导出</i>
        <i class="el-icon-document-add">导入</i>
        <span style="color: #1890ff;">共选中{{ selectedtotal }}项</span>
        <div trigger="click" class="jia_right">
          <el-popover placement="right" width="400" trigger="click">

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>自定义列</span>

              </div>
              <div>
                <div class="zidingyi_listt" style="height: 344px;">
                  <div class="left">
                    <div class="zidingyi_list"> <input disabled="disabled" type="checkbox" v-model="ischeck">#
                    </div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.billDate" :checked="con"
                        type="checkbox">单据日期</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.srcNo" :checked="con"
                        type="checkbox">源单号</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.opDept_dictText" :checked="con"
                        type="checkbox">业务部门</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.cost" :checked="con"
                        type="checkbox">入库金额</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.settledAmt" :checked="con"
                        type="checkbox">已结算金额</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.invoiceType_dictText" :checked="con"
                        type="checkbox">发票类型</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.billStage_dictText" :checked="con"
                        type="checkbox">单据阶段</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.hasSwell_dictText" :checked="con"
                        type="checkbox">已关闭</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.isAuto_dictText" :checked="con"
                        type="checkbox">自动单据</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.bpmiInstanceId" :checked="con"
                        type="checkbox">备注</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.approver_dictText" :checked="con"
                        type="checkbox">核批人</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.createBy_dictText" :checked="con"
                        type="checkbox">制单人</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.updateTime" :checked="con"
                        type="checkbox">修改时间</div>
                    <div class="zidingyi_list"> <input disabled="disabled" type="checkbox" v-model="ischeck">操作
                    </div>
                  </div>
                  <div class="right">
                    <div class="zidingyi_list"><input v-model="columnVisibility.billNo" :checked="con"
                        type="checkbox">单据编号</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.subject" :checked="con"
                        type="checkbox">单据主题</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.supplierId_dictText" :checked="con"
                        type="checkbox">供应商</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.operator_dictText" :checked="con"
                        type="checkbox">业务员</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.settleAmt" :checked="con"
                        type="checkbox">结算金额</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.invoicedAmt" :checked="con"
                        type="checkbox">已开票金额</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.handler_dictText" :checked="con"
                        type="checkbox">入库经办</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.hasRp_dictText" :checked="con"
                        type="checkbox">已生效</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.isClosed_dictText" :checked="con"
                        type="checkbox">已作废</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.isEffective_dictText" :checked="con"
                        type="checkbox">红字单据</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.effectiveTime" :checked="con"
                        type="checkbox">生效时间</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.createTime" :checked="con"
                        type="checkbox">制单时间</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.sysOrgCode_dictText" :checked="con"
                        type="checkbox">制单部门</div>
                    <div class="zidingyi_list"><input v-model="columnVisibility.updateBy_dictText" :checked="con"
                        type="checkbox">修改人</div>
                  </div>
                </div>

              </div>
            </el-card>
            <button class="aaa" slot="reference"><i class="el-icon-setting"></i>自定义列</button>
          </el-popover>
        </div>
      </div>

      <div class="table">
        <el-table id="table_excel" :data="tableData" border style="width: 100%" @selection-change="selectionnum">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed type="index" label="#" width="40">
          </el-table-column>
          <el-table-column fixed prop="billNo" label="单据编号" width="180" v-if="columnVisibility.billNo">
          </el-table-column>
          <el-table-column prop="billDate" label="单据日期" width="120" v-if="columnVisibility.billDate">
          </el-table-column>
          <el-table-column prop="city" label="单据主题" width="120" v-if="columnVisibility.subject">
          </el-table-column>
          <el-table-column prop="srcNo" label="源单号" width="300" v-if="columnVisibility.srcNo">
          </el-table-column>
          <el-table-column prop="supplierId_dictText" label="供应商" width="120"
            v-if="columnVisibility.supplierId_dictText">
          </el-table-column>
          <el-table-column prop="opDept_dictText" label="业务部门" width="120" v-if="columnVisibility.opDept_dictText">
          </el-table-column>
          <el-table-column prop="operator_dictText" label="业务员" width="120" v-if="columnVisibility.operator_dictText">
          </el-table-column>
          <el-table-column prop="cost" label="入库金额" width="120" v-if="columnVisibility.cost">
          </el-table-column>
          <el-table-column prop="settleAmt" label="计算金额" width="120" v-if="columnVisibility.settleAmt">
          </el-table-column>
          <el-table-column prop="settledAmt" label="已结算金额" width="120" v-if="columnVisibility.settledAmt">
          </el-table-column>
          <el-table-column prop="invoicedAmt" label="已开票金额" width="120" v-if="columnVisibility.invoicedAmt">
          </el-table-column>
          <el-table-column prop="invoiceType_dictText" label="发票类型" width="120"
            v-if="columnVisibility.invoiceType_dictText">
          </el-table-column>
          <el-table-column prop="zip" label="入库经办" width="120" v-if="columnVisibility.handler_dictText">
          </el-table-column>
          <el-table-column prop="billStage_dictText" label="单据阶段" width="120"
            v-if="columnVisibility.billStage_dictText">
          </el-table-column>
          <el-table-column prop="hasRp_dictText" label="已生效" width="120" v-if="columnVisibility.hasRp_dictText">
          </el-table-column>
          <el-table-column prop="hasSwell_dictText" label="已关闭" width="120" v-if="columnVisibility.hasSwell_dictText">
          </el-table-column>
          <el-table-column prop="isClosed_dictText" label="已作废" width="120" v-if="columnVisibility.isClosed_dictText">
          </el-table-column>
          <el-table-column prop="isAuto_dictText" label="自动单据" width="120" v-if="columnVisibility.isAuto_dictText">
          </el-table-column>
          <el-table-column prop="isEffective_dictText" label="红字单据" width="120"
            v-if="columnVisibility.isEffective_dictText">
          </el-table-column>
          <el-table-column prop="bpmiInstanceId" label="备注" width="180" v-if="columnVisibility.bpmiInstanceId">
          </el-table-column>
          <el-table-column prop="effectiveTime" label="生效时间" width="120" v-if="columnVisibility.effectiveTime">
          </el-table-column>
          <el-table-column prop="approver_dictText" label="核批人" width="120" v-if="columnVisibility.approver_dictText">
          </el-table-column>
          <el-table-column prop="createTime" label="制单时间" width="120" v-if="columnVisibility.createTime">
          </el-table-column>
          <el-table-column prop="createBy_dictText" label="制单人" width="120" v-if="columnVisibility.createBy_dictText">
          </el-table-column>
          <el-table-column prop="sysOrgCode_dictText" label="制单部门" width="120"
            v-if="columnVisibility.sysOrgCode_dictText">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="120" v-if="columnVisibility.updateTime">
          </el-table-column>
          <el-table-column prop="updateBy_dictText" label="修改人" width="120" v-if="columnVisibility.updateBy_dictText">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="bianji(scope.row)"
                style="color: #ccc;margin-right: 10px;">编辑</el-button>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item disabled>删除</el-dropdown-item>
                  <el-dropdown-item command="review">审核</el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'void', row: scope.row }">作废</el-dropdown-item>
                  <el-dropdown-item command="print">打印</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30]"
          :current-page="tableData.page" :page-size="tableData.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <div class="edit">
      <!-- 编辑窗口 -->
      <el-dialog title="采购入库-编辑" :fullscreen="bigscreen" :visible.sync="dialogFormVisibleedit">
        <i class="el-icon-full-screen" @click="bigscreen = !bigscreen"></i>
        <el-form :model="editform">
          <div class="one">
            <el-form-item label="单据编号" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="单据日期" :label-width="formLabelWidth">
              <div class="block">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-form-item>

            <el-select v-model="editform.region" disabled placeholder=""></el-select>

            <el-form-item label="已生效" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="已关闭" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="已作废" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
          </div>

          <div class="two">
            <el-form-item label="单据主题" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="业务员" :label-width="formLabelWidth">
              <el-input placeholder="请先选择用户" v-model="editform.input3" class="input-with-select">
                <el-button slot="append">选择用户</el-button>
              </el-input>
            </el-form-item>


            <el-form-item label="业务部门" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择"></el-select>
            </el-form-item>
          </div>

          <div class="three">
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择"></el-select>
            </el-form-item>

            <el-form-item label="采购订单" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="发票类型" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="four">
            <el-form-item label="入库经办" :label-width="formLabelWidth">
              <el-input placeholder="请先选择用户" v-model="editform.input3" class="input-with-select">
                <el-button slot="append">选择用户</el-button>
              </el-input>
            </el-form-item>
          </div>

          <!-- tab标签切换 -->
          <el-tabs v-model="editform.activeName" @tab-click="handleClick">
            <el-tab-pane label="采购订单明细" name="first">
              <div class="first">
                <el-button disabled>添加></el-button>
              </div>
              <el-table :data="table" style="width: 100%" height="250">
                <el-table-column fixed type="selection" width="55"></el-table-column>
                <el-table-column fixed type="index" label="#" width="150">
                </el-table-column>
                <el-table-column fixed prop="date" label="源单类型" width="160">
                </el-table-column>
                <el-table-column fixed prop="name" label="源单分录号" width="120">
                </el-table-column>
                <el-table-column fixed prop="province" label="物料" width="120">
                </el-table-column>
                <el-table-column prop="city" label="规格型号" width="120">
                </el-table-column>
                <el-table-column prop="address" label="单位" width="300">
                </el-table-column>
                <el-table-column prop="zip" label="数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税单价" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="折扣率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已入库数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已入库金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已开票金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="备注" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义1" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义2" width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="明细" name="second">
              <el-table :data="table" style="width: 100%" height="250">
                <el-table-column fixed type="selection" width="55"></el-table-column>
                <el-table-column fixed type="index" label="#" width="150">
                </el-table-column>
                <el-table-column fixed prop="name" label="源单分录号" width="120">
                </el-table-column>
                <el-table-column fixed prop="province" label="物料" width="120">
                </el-table-column>
                <el-table-column prop="city" label="规格型号" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="仓库" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="批次" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="单位" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="结算数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税单价" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="折扣率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="涨吨数量+/-" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="入库数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="采购费用" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="入库金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="备注" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义1" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义2" width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

          <!-- 备注 -->
          <el-form :inline="true" :model="editform" class="demo-form-inline">
            <el-form-item label="备注" style="width: 300px;line-height: 20px;">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="editform.textarea1">
              </el-input>
            </el-form-item>
          </el-form>
          <!-- 上传附件 -->
          <el-form :inline="true" :model="editform" class="demo-form-inline">
            <el-form-item label="附件" style="width: 300px;line-height: 20px;">
              <input type="file">
            </el-form-item>
          </el-form>



        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleedit = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisibleedit = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="Audit">
      <!-- 审核窗口 -->
      <el-dialog title="采购入库-审核" :fullscreen="bigscreen" :visible.sync="dialogFormVisibleAudit">
        <i class="el-icon-full-screen" @click="bigscreen = !bigscreen"></i>
        <el-form :model="Auditform">
          <div class="one">
            <el-form-item label="单据编号" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="单据日期" :label-width="formLabelWidth">
              <div class="block">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-form-item>

            <el-select v-model="editform.region" disabled placeholder=""></el-select>

            <el-form-item label="已生效" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="已关闭" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="已作废" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>
          </div>

          <div class="two">
            <el-form-item label="单据主题" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="业务员" :label-width="formLabelWidth">
              <el-input placeholder="请先选择用户" v-model="editform.input3" class="input-with-select">
                <el-button slot="append">选择用户</el-button>
              </el-input>
            </el-form-item>


            <el-form-item label="业务部门" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择"></el-select>
            </el-form-item>
          </div>

          <div class="three">
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择"></el-select>
            </el-form-item>

            <el-form-item label="采购订单" :label-width="formLabelWidth">
              <el-input v-model="editform.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="发票类型" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="four">
            <el-form-item label="入库经办" :label-width="formLabelWidth">
              <el-input placeholder="请先选择用户" v-model="editform.input3" class="input-with-select">
                <el-button slot="append">选择用户</el-button>
              </el-input>
            </el-form-item>
          </div>

          <!-- tab标签切换 -->
          <el-tabs v-model="editform.activeName" @tab-click="handleClick">
            <el-tab-pane label="采购订单明细" name="first">
              <div class="first">
                <el-button disabled>添加></el-button>
              </div>
              <el-table :data="table" style="width: 100%" height="250">
                <el-table-column fixed type="selection" width="55"></el-table-column>
                <el-table-column fixed type="index" label="#" width="150">
                </el-table-column>
                <el-table-column fixed prop="date" label="源单类型" width="160">
                </el-table-column>
                <el-table-column fixed prop="name" label="源单分录号" width="120">
                </el-table-column>
                <el-table-column fixed prop="province" label="物料" width="120">
                </el-table-column>
                <el-table-column prop="city" label="规格型号" width="120">
                </el-table-column>
                <el-table-column prop="address" label="单位" width="300">
                </el-table-column>
                <el-table-column prop="zip" label="数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税单价" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="折扣率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已入库数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已入库金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="已开票金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="备注" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义1" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义2" width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="明细" name="second">
              <el-table :data="table" style="width: 100%" height="250">
                <el-table-column fixed type="selection" width="55"></el-table-column>
                <el-table-column fixed type="index" label="#" width="150">
                </el-table-column>
                <el-table-column fixed prop="name" label="源单分录号" width="120">
                </el-table-column>
                <el-table-column fixed prop="province" label="物料" width="120">
                </el-table-column>
                <el-table-column prop="city" label="规格型号" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="仓库" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="批次" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="单位" width="120">
                </el-table-column>

                <el-table-column prop="zip" label="结算数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="含税单价" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="折扣率%" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="税额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="结算金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="涨吨数量+/-" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="入库数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="采购费用" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="入库金额" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="备注" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义1" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="自定义2" width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

          <!-- 备注 -->
          <el-form :inline="true" :model="editform" class="demo-form-inline">
            <el-form-item label="备注" style="width: 300px;line-height: 20px;">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="editform.textarea1">
              </el-input>
            </el-form-item>
          </el-form>
          <!-- 上传附件 -->
          <el-form :inline="true" :model="editform" class="demo-form-inline">
            <el-form-item label="附件" style="width: 300px;line-height: 20px;">
              <input type="file">
            </el-form-item>
          </el-form>



        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleedit = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisibleedit = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ColorPicker } from 'element-ui';
import { GetpurchList, DelpurchList , Getpurchid , EditpurchList } from '@/api/sgy';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      //导出标题
      title: "采购入库表格",
      //对话框放大
      bigscreen: false,
      //新增对话框
      dialogFormVisible: false,
      //修改对话框
      dialogFormVisibleedit: false,
      //审核对话框
      dialogFormVisibleAudit:false,
      //对话框宽度
      formLabelWidth: '20%',
      //
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        //备注
        textarea1: '',

        input3: '',
        activeName: 'first',

        //新增对话框的id
      Billid:'',
      },
      //修改数组
      editform: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        //备注
        textarea1: '',

        input3: '',
        activeName: 'first',

      },
      //审核数组
      Auditform: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        //备注
        textarea1: '',

        input3: '',
        activeName: 'first',

      },
      //发票类型下拉选择
      options: [{
        value: '选项1',
        label: '请选择'
      }, {
        value: '选项2',
        label: '不开票'
      }, {
        value: '选项3',
        label: '普通发票'
      }, {
        value: '选项4',
        label: '专用发票'
      }, {
        value: '选项5',
        label: '专用增值税发票'
      }, {
        value: '选项6',
        label: '收据'
      }, {
        value: '选项7',
        label: '其他'
      }],
      // 采购订单明细
      table: [],
      value: '',
      formLabelWidth: '120px',

      //时间选择器
      value1: '',


      //选中数量
      selectedtotal: 0,
      //自定义列表
      con: true,
      ischeck: true,
      shuxing: false,

      //查询列表
      formInline: {
        billNo: '',
        subject: '',
        //时间选择器
        value1: '',
      },
      //获取采购入库列表 （传值）
      datalist: {
        _t: '',
        pageNo: 1,
        pageSize: 10,
        isVoided: 0,
        column: 'createTime',
        order: 'desc',
        field: "id,,,billNo,billDate,subject,srcNo,supplierId_dictText,opDept_dictText,operator_dictText,cost,settleAmt,settledAmt,invoicedAmt,invoiceType_dictText,handler_dictText,billStage_dictText,isEffective_dictText,isClosed_dictText,isVoided_dictText,isAuto_dictText,isRubric_dictText,remark,effectiveTime,approver_dictText,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action"
      },
      //下拉选择
      billStage: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '12',
          label: '编制中'
        },
        {
          value: '14',
          label: '编制完'
        },
        {
          value: '22',
          label: '核批中'
        },
        {
          value: '23',
          label: '核批撤销'
        },
        {
          value: '24',
          label: '核批完'
        },
        {
          value: '32',
          label: '执行中'
        },
        {
          value: '33',
          label: '执行止'
        },
        {
          value: '34',
          label: '执行完'
        },
      ],
      isEffective: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        },
      ],
      isClosed: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        },
      ],
      isVoided: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        },
      ],
      //列表渲染
      tableData: [

      ],
      //分页器
      total: 0,

      //自定义列表
      columnVisibility: {
        billNo: true,
        billDate: true,
        subject: true,
        srcNo: true,
        supplierId_dictText: true,
        opDept_dictText: true,
        operator_dictText: true,
        cost: true,
        settleAmt: true,
        settledAmt: true,
        invoicedAmt: true,
        invoiceType_dictText: true,
        handler_dictText: true,
        billStage_dictText: true,
        hasRp_dictText: true,
        hasSwell_dictText: true,
        isClosed_dictText: true,
        isAuto_dictText: true,
        isEffective_dictText: true,
        bpmiInstanceId: true,
        effectiveTime: true,
        approver_dictText: true,
        createTime: true,
        createBy_dictText: true,
        sysOrgCode_dictText: true,
        updateTime: true,
        updateBy_dictText: true,
      },
    }
  },
  methods: {
    //选中数量
    selectionnum(selection) {
      this.selectedtotal = selection.length;
    },
    //打印
    print() {
      if (this.isDataLoaded) {
        window.print()
      } else {
        alert('数据还未加载完成')
      }
    },
    //查询
    async onSubmit() {
      let res = await GetpurchList(this.formInline)
      console.log(res)
      this.tableData = res.result.records
      this.total = res.result.total
      this.isDataLoaded = true
    },
    //重置
    resetForm() {
      this.formInline = {
        billNo: '',
        subject: '',
        value1: '',
      };
    },
    //展开
    zhankai() {
      this.shuxing = !this.shuxing
    },
    handleClick(row) {
      console.log(row);
    },
    //获取采购入库列表
    async getlist() {
      const _t = Math.floor(Date.now() / 1000);
      this.datalist._t = _t
      // console.log(_t)
      let res = await GetpurchList(this.datalist)
      console.log(res.result.records)
      this.tableData = res.result.records
      this.total = res.result.total
    },
    //更多
    handleCommand(command) {
      if (command.action === "void") {
        this.handledel(command.row);
      } else if (command === "delete") {
        this.handledel()
      } else if (command === "review") {
        this.Audit()
      } else if (command === "print") {
        this.print()
      }
    },
    handledel(row) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row.id)
        let res = await DelpurchList(row.id)
        console.log(res)
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },

    //分页器
    handleSizeChange(val) {
      this.datalist.pageSize = val;
      this.datalist.pageNo = 1;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.datalist.pageNo = val;
      this.getlist();
    },

    //tab标签切换
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 导出
    Export() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    //新增
    add(){
      this.dialogFormVisible = true
      this.GetBill({})
    },
    //获取新增编号
    async GetBill({}){
      let res = await Getpurchid({})
      console.log(res)
      this.form.Billid = res.result
    },
    //编辑
    async  bianji(row){
      this.dialogFormVisibleedit = true
      console.log(row.id)
      let res = await EditpurchList(row)
      console.log(res)
    },
    //审核
    Audit(){
      this.dialogFormVisibleAudit = true
    }
  },
  mounted() {
    this.getlist()
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 5px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style scoped>
.el-date-editor {
  width: 150px;
  height: 30px;
  /* 你可以根据需要调整这个高度 */
  line-height: 10px;
  /* 保持行高与高度一致，以确保文字垂直居中 */
}

.line {
  text-align: center;
}

.el-form-item {
  margin-bottom: 0px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-date-editor--daterange {
  width: 280px;
}

.fn {

  .el-icon-plus,
  .el-icon-download,
  .el-icon-document-add {
    padding: 5px;
    color: #66b1ff;
    cursor: pointer;
    margin: 5px 10px;
    font-size: 14px;
  }

  .el-dialog {
    width: 100%;
    .one {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-select {
        width: 75px;
        margin-left: 10px;
      }


    }

    .two {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-input-group {
        margin-left: 10px;
      }
    }

    .three {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

    }

    .four {
      width: 100%;
      display: flex;
    }
  }

}

.zidingyi_listt {
  display: flex;
}

.jia_right {
  float: right;
}
.edit{
  .el-dialog {
    width: 100%;
    .one {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-select {
        width: 75px;
        margin-left: 10px;
      }


    }

    .two {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-input-group {
        margin-left: 10px;
      }
    }

    .three {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

    }

    .four {
      width: 100%;
      display: flex;
    }
  }
}
.Audit{
  .el-dialog {
    width: 100%;
    .one {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-select {
        width: 75px;
        margin-left: 10px;
      }


    }

    .two {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .el-input-group {
        margin-left: 10px;
      }
    }

    .three {
      width: 100%;
      display: flex;
      margin-bottom: 10px;

    }

    .four {
      width: 100%;
      display: flex;
    }
  }
}
</style>
